<template>
  <div style="height:750px">
    <div style="height:700px">
      <el-table
        :data="
          contents.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :row-class-name="tableRowClassName"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="olderNumber"
          label="工单号"
          width="140"
        ></el-table-column>
        <el-table-column label="工单标题">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="工单详情" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.detail }}</span>
          </template>
        </el-table-column>

        <el-table-column label="客户名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.customer }}</span>
          </template>
        </el-table-column>

        <el-table-column label="紧急程度">
          <template slot-scope="scope">
            <el-tag :type="scope.row.urgent == 2 ? 'danger' : 'success'">{{
              scope.row.urgent == 2 ? "紧急" : "普通"
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="电话">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.adminName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="指派人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.worker }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单状态" width="180">
          <template slot-scope="scope">
            <el-tag
              style="margin-left: 10px"
              :type="
                scope.row.state == '处理完毕'
                  ? 'success'
                  : scope.row.state == '受理中'
                  ? ''
                  : scope.row.state == '工人处理中'
                  ? 'warning'
                  : 'danger'
              "
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" width="260" style="text-align:center">
          <template slot-scope="scope">

            <el-button type="primary" size="mini" @click="lookUp(scope.row)" style="margin-right:10px"
              >查看</el-button
            >

            <el-button
              size="mini"
              type="danger"
              @click="ReceOlders(scope.row)"
              v-if="scope.row.state == '受理中' ? true : false"
              >接单</el-button
            >

            <el-button
              type="danger"
              size="mini"
              v-if="scope.row.state == '工人处理中' ? true : false"
              @click="Oldersfinish(scope.row)"
              >工单完成</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="rejectOrder(scope.row)"
              v-if="scope.row.state == '受理中' ? true : false"
              >拒绝接单</el-button
            >
          
         
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="驳回理由" :visible.sync="dialogFormVisible" width="30%">
        <div style="height:120px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入拒绝接单理由"
            v-model="reject"
          ></el-input>
          <el-button
            type="primary"
            style="float:right ;margin-top:30px"
            @click="submit()"
            >确认</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="contents.length"
      ></el-pagination>
    </div>
    <dialogs v-if="addVisible" ref="lookolder"></dialogs>
  </div>
</template>

<script>
import dialogs from "./olderinfo";
export default {
  components: {
    dialogs,
  },
  data() {
    return {
      contents: [],
      currentPage: 1,
      pagesize: 8,
      state2: 0,
      id: "",
      problemstate: "",
      dialogFormVisible: false,
      reject: "",
      username: this.$store.state.user.username,
      addVisible: false,
    };
  },
  mounted() {
    this.showTables();
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    showTables() {
      this.$axios({
        method: "get",
        params: {
          username: this.username,
        },
        url: "/findAllWorkerOlders",
      })
        .then((res) => {
          this.contents = res.data.result;
          var stateList = {
            0: "受理中",
            1: "工人处理中",
            2: "处理完毕",
            3: "已驳回",
          };
          for (const item of this.contents) {
            item.state = stateList[item.state];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    Oldersfinish(row) {
      this.state2 = 2;
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "power:Oldersfinish",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$axios({
              method: "get",
              params: {
                id: row.problemId,
              },
              url: "/older/checkProblemId",
            })
              .then((res) => {
                this.problemstate = res.data.result;
                if (this.problemstate == 3 || this.problemstate == 4) {
                  this.$axios({
                    method: "post",
                    data: {
                      id: row.id,
                      state: this.state2,
                    },
                    url: "/OldesFinish",
                  })
                    .then((res) => {
                      if (res.data.code == 200) {
                        this.$message.success("已确认工单完成，问题解决");
                        this.$axios({
                          method: "post",
                          data: {
                            orderId: row.id,
                            worker: row.worker,
                            state: this.state2,
                          },
                          url: "/AddRecord",
                        })
                          .then((res) => {
                            console.log(res);
                          })
                          .catch((err) => {
                            console.log(err);
                          });

                        this.showTables();
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                } else {
                  this.$message.error(
                    "客户还未确认问题已解决，无法确认工单完成"
                  );
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ReceOlders(row) {
      console.log(row);
      this.state2 = 1;
      this.$axios({
        method: "get",
        params: {
          username: this.$store.state.user.username,
          powername: "power:ReceOlders",
        },
        url: "/user/UserPower",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$axios({
              method: "post",
              data: {
                id: row.id,
                state: this.state2,
              },
              url: "/ReceOlders",
            })
              .then((res) => {
                if (res.data.code == 200) {
                  this.$axios({
                    method: "post",
                    params: {
                      id: row.problemId,
                    },
                    url: "/older/updateProblemState1",
                  })
                    .then((res) => {
                      if (res.data.code == 200) {
                        this.$message.success("已接单成功,请尽快完成任务");
                        this.showTables();
                      }
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                  this.$axios({
                    method: "post",
                    data: {
                      orderId: row.id,
                      worker: row.worker,
                      state: this.state2,
                    },
                    url: "/AddRecord",
                  })
                    .then((res) => {
                      console.log(res);
                    })
                    .catch((err) => {
                      console.log(err);
                    });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            this.$message.success(res.data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    rejectOrder(row) {
      this.id = row.id;

      this.dialogFormVisible = true;
    },

    submit() {
      this.state2 = 3;
      this.$axios({
        method: "post",
        data: {
          id: this.id,
          state: this.state2,
          reject: this.reject,
        },
        url: "/RejectOrder",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message("您已拒绝该工单");
            this.dialogFormVisible = false;
            this.$axios({
              method: "post",
              data: {
                orderId: this.id,
                worker: this.username,
                state: this.state2,
              },
              url: "/AddRecord",
            })
              .then((res) => {
                console.log(res);
              })
              .catch((err) => {
                console.log(err);
              });

            this.showTables();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    lookUp(row) {
      this.addVisible = true;
        if (row.imgUrl == "") {
        row.imgUrl = null;
      }
      this.$nextTick(() => {
        //调用子组件的方法

        this.$refs.lookolder.init(row);
      });
    },
  },
};
</script>

<style></style>
